<script setup>
import custromHeader from '@/components/custromHeader.vue'
import {requestHomeData} from '@/api/home'
import {onMounted,reactive,ref,watch} from 'vue'
import {useStore} from '@/stores/home'
import {httpSearch} from '@/api/search'
import { useRoute } from 'vue-router'
import { Message } from '@arco-design/web-vue'
import custromFooter from '@/components/footer.vue'
import movieList from '@/components/movieList.vue'

const route = useRoute()
let menuList = ref([])
const homeStore = useStore()
homeStore.updateMenuList()

// 搜索所要参数
let searchParams = reactive({
  wd:'', // 关键词
  page:1,//页码
})

let searchResult = reactive({
  list:[],
  count:0, // 搜索到结果数
  page_now:1, // 当前第几页
  page_count:0, // 一共多少页面
  one_pages_count:0, // 每页多少条
})

let {wd,page} = route.query
  let _searchParams = {wd}
  console.log('searchParams',searchParams);
  if(!page || page == undefined){
    page = 1
    searchParams.page = page
    _searchParams.page = page
  }
  Object.keys(searchParams).forEach(key => {
    console.log('key',key);
    
    searchParams[key] = _searchParams[key]
  })
  console.log('sear',searchParams);

let getSearchData = async () => {
  let {data:res} = await httpSearch(searchParams.wd,'搜索',searchParams.page)
  console.log('搜索结果',res);
  if (res.code == 200) {
    Message.success('找到' + res.data.count + '条数据')
    let {list,count,page_now,page_count,one_page_count} = res.data
    const _resdata = {list,count,page_now,page_count,one_page_count}
    Object.keys(searchResult).map(key => searchResult[key] = _resdata[key])
  } else {
    Message.error(res.msg)
  }
}
// 页码改变函数
let pageChangeHandler = (current) => {
  // console.log('当前页码',current);
  searchParams.page = current
  getSearchData()
}

// 监听路由 如果改变则重新请求
watch(()=>route.query.wd,(newWd,oldWd)=>{
  searchParams.wd = newWd
  searchParams.page = 1
  getSearchData()
})

onMounted(() => {
  getSearchData()
})

</script>

<template>
  <div class="search-container">
    <custromHeader :menu-list="homeStore.menuList"></custromHeader>
    <div class="search-info-container"></div>
    <movieList :movieList="searchResult.list" :cateTitle="searchParams.wd"></movieList>
    <!-- 共找到 -->
    <div class="search-movie-container">
      <div class="search-movie-content">
        <p class="search-result-text">共找到 <span style="color:red;"> {{searchResult.count}} </span> 条相关影片</p>
        <a-pagination :total="searchResult.count" @change="pageChangeHandler" :default-current=1 :default-page-size=18 />
      </div>
    </div>
    <custromFooter></custromFooter>
  </div>
</template>


<style lang="less" scoped>
.search-info-container {
    width: 100%;
}
/deep/ .cc-container,/deep/ .cate-title,/deep/ .hit-movie-container ,/deep/ .hit-movie-list {
  background: #fff;
}
.search-movie-container {
  width: 100%;
  .search-movie-content {
    width: 1300px;
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
  }
  /deep/ .arco-pagination {
    margin: 28px 0px;
    justify-content: center;
  }
  /deep/ .arco-pagination-item-active {
    background: #884dff;
    color: #fff;
  }
}
</style>'
'